<template>
    <!--搜索商品-->
    <view class='search-goods-index-containter'>
        <view class="search-goods-index-top">
            <input class="search-goods-index-top-input" placeholder="搜索商品" focus="true" @input="onInput" @focus="onFocus"
                @blur="onBlur" :value="searchTxt" />
            <!--上方输入框-->
            <image class="search-goods-index-top-icon-search" src="../../static/img/common/icon_search.png" />
            <image class="search-goods-index-top-icon-del" v-if="bShowDel" @tap="onDelTxt"
                src="../../static/img/common/btn_close_0.png" />
        </view>
        <view class="search-goods-index-history">
            <view class="search-goods-index-history-top">
                <view>搜索历史</view>
                <block v-if="arrHistoryLists.length > 0">
                    <image v-if="curHistoryClickStyle === -1" class="search-goods-index-history-top-icon-del"
                        @tap="onEnterHistoryEditor" src="../../static/img/common/icon_del.png">
                    </image>
                    <view class="editor" v-else>
                        <span class="all-delete" @tap="onDeleteAll">全部删除</span>
                        <span class="complete" @tap="onEnterHistoryEditor">完成</span>
                    </view>
                </block>
            </view>
            <view class="search-goods-index-history-lists">
                <view @tap="onSearchHistory(item, index)" class="bubble" v-for="(item, index) in arrHistoryLists"
                    :key="index">
                    <span>{{ item }}</span>
                    <span class="del-flag" v-if="curHistoryClickStyle === 1">&nbsp;&nbsp;×</span>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { addSearchHistory, clearOneSearchHistory, clearSearchHistory, getSearchHistory } from "../../utils/storage.js";
export default {
    data() {
        return {
            title: 'Hello',
            arrHistoryLists: [],
            searchTxt: '',//要搜索的字符串
            bShowDel: false,//是否显示输入框删除按钮
            timeoutID: null,//定时器
            enableSearch: true,//onBlur输入是否有效
            inputFocusing: true,//输入框是否处于焦点中
            curHistoryClickStyle: -1,//点击下方搜索历史icon，选择何种模式 -1搜索 1删除
            historySearchTxt: ''
        }
    },
    mounted() {
    },
    onLoad() {

    },
    methods: {
        onSwiperJump(e) {
        },
        onShow: function () {
            this.updateSearchHistory();
        },
        onUnload() {
            this.clearInputMsg();
        },
        //输入框-焦点
        onFocus() {
            this.inputFocusing = true;
            this.bShowDel = true;
            this.curHistoryClickStyle = -1;
        },
        //输入
        onInput(e) {
            this.searchTxt = e.detail.value;
        },
        //搜索商品-输入完成
        onBlur(e) {
            if (!this.inputFocusing) return;
            clearTimeout(this.timeoutID);
            this.timeoutID = setTimeout(() => {
                clearTimeout(this.timeoutID);
                if (this.inputFocusing) {
                    let val = this.searchTxt;
                    if (!val.trim()) return;
                    this.onSearch(val.trim());
                }
                this.clearInputMsg();
            }, 500);
        },
        //删除输入的要搜索的文案
        onDelTxt() {
            this.clearInputMsg();
        },
        //清空输入要搜索的信息
        clearInputMsg() {
            this.inputFocusing = false;
            this.searchTxt = '';
            this.bShowDel = false;
        },
        //进入搜索记录编辑模式
        onEnterHistoryEditor() {
            this.curHistoryClickStyle = this.curHistoryClickStyle * -1
            this.clearInputMsg();
        },
        //搜索
        async onSearch(val) {
            this.historySearchTxt = val;
            // let arrHistoryLists = this.arrHistoryLists;
            // arrHistoryLists.shift(val);
            // this.arrHistoryLists = arrHistoryLists;
            addSearchHistory(val);//将搜索记录添加到缓存中
            this.updateSearchHistory();
            uni.navigateTo({
                url: '/pages/searchResult/index?content=' + val,
            })
        },
        //全部删除
        onDeleteAll() {
            clearSearchHistory();
            this.arrHistoryLists = [];
            this.curHistoryClickStyle = -1;
        },
        //点击历史中搜索
        onSearchHistory(item, index) {
            // let index = event.currentTarget.dataset.index;
            // let val = getSearchHistory()[index];
            this.clearInputMsg();
            if (this.curHistoryClickStyle === -1) {
                this.onSearch(item);
            } else {
                clearOneSearchHistory(index);
                this.updateSearchHistory();
            }
        },
        //更新搜索记录
        updateSearchHistory() {
            let arrHistoryLists = getSearchHistory();
            arrHistoryLists.forEach((v, index) => {
                if (v !== null) {
                    arrHistoryLists[index] = v.length > 24 ? v.substr(0, 12) + '...' + v.slice(-12) : v;
                }
            });
            this.arrHistoryLists = arrHistoryLists;
        }
    }
}
</script>

<style scoped>
.search-goods-index-containter {
    position: relative;
    width: 100%;
    height: 100%;
}

.search-goods-index-top {
    width: 100%;
    height: 60rpx;
    position: relative;
    margin-top: 10rpx;
}

.search-goods-index-top-input {
    font-size: 28rpx;
    color: rgba(153, 153, 153, 1);
    line-height: 36rpx;
    height: 60rpx;
    background: rgba(247, 247, 247, 1);
    border-radius: 30rpx;
    margin: 0 5%;
    padding-left: calc(2% + 60rpx);
}

.search-goods-index-top-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 84%;
    margin: -44rpx 8% 0 8%;
    z-index: 1;
}

.search-goods-index-top-icon-del {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 10%;
    top: 26%;
}

.search-goods-index-top-icon-search {
    width: 26rpx;
    height: 28rpx;
    left: 8%;
    top: 26%;
    z-index: 1;
    position: absolute;
}

.search-goods-index-history {
    width: 86%;
    margin: 50rpx 0 0 7%;
    height: 100%;
}

.search-goods-index-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: rgba(51, 51, 49, 1);
}

.search-goods-index-history-top-icon-del {
    width: 24rpx;
    height: 26rpx;
}

.bubble {
    font-size: 24rpx;
    color: rgba(51, 51, 51, 1);
    background: rgba(245, 245, 245, 1);
    border-radius: 10rpx;
    display: inline-block;
    margin: 6rpx 10rpx;
    padding: 10rpx 15rpx;
}

.search-goods-index-history-lists {
    margin-top: 15rpx;
    max-height: 75%;
    overflow-y: scroll;
}

.editor {
    font-size: 24rpx;
}

.all-delete {
    margin-right: 20rpx;
}

.complete {
    color: red;
}

.del-flag {
    margin-left: 10rpx;
    color: rgba(153, 153, 153, 1);
}
</style>